import defaultImg from '@/assets/images/200.png'
import Message from './Message'
import Confirm from './Confirm'
// 批量导入函数 (目录 是否加载子目录 匹配对应文件的正则)
const importFn = require.context('./', false, /\.vue$/)
export default {
  install (app) {
    // 文件路径
    importFn.keys().forEach(path => {
      // 组件导入
      const component = importFn(path).default
      // 注册
      app.component(component.name, component)
    })
    // 注册自定义指令
    defineDirective(app)
    // 定义原型函数
    app.config.globalProperties.$message = Message
    app.config.globalProperties.$confirm = Confirm
  }
}
// 自定义指令
const defineDirective = (app) => {
  // 懒加载图片(大量图片时使用)
  app.directive('lazy', {
    mounted (el, binding) { // dom元素 参数
      const observe = new IntersectionObserver(([{ isIntersecting }]) => {
        // 进入可视区
        if (isIntersecting) {
          // 停止监视
          observe.unobserve(el)
          // 加载失败默认图
          el.onerror = () => {
            el.src = defaultImg
          }
          el.src = binding.value
        }
      }, {
        // 阈值
        threshold: 0
      })
      // 开启监视
      observe.observe(el)
    }
  })
}
